<template>
  <div class="demo-content">
    <h1>Fabric 使用fire生成自定义事件</h1>
    <section class="demo-text">
      <el-row>
        <el-button @click="changeclickstate">单击：{{click}}</el-button>
        <el-button @click="changemovestate">移动：{{moveing}}</el-button>
        <el-button @click="addfire">fire:{{fireevent}}</el-button>
      </el-row>
      <el-row>
        <el-col :span="18">
          <canvas id="canvas" width="1200" height="600" ref="canvas"></canvas>
        </el-col>
        <el-col :span="4">
          <div class="messlist">
            <el-row>
              <el-button @click="clearlist">清除</el-button>
              <el-tag>{{eventlist.length}}</el-tag>
            </el-row>
            <el-collapse accordion style="height:600px;overflow:auto">
              <el-collapse-item
                v-for="(item,index) in eventlist"
                :title="item.e.type+'----'+index"
                :key="index"
                :name="index"
              >
                <div>x:{{item.pointer.x}}</div>
                <div>y:{{item.pointer.y}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
      </el-row>
      <h2>使用fire可以自定义事件</h2>
      <p>使用fire进行事件提交，提交后使用on方法对提交的事件进行监听</p>
      <img src="~@/imags/20191251632.png" alt>
      <p style="text-align:right;padding-right:60px">@王睿杰 2019.1.25</p>
    </section>
  </div>
</template>
<script>
import {fabric} from  "@/js/fabric";
export default {
  data() {
    return {
      click: "off",
      moveing: "off",
      canvas: null,
      eventlist: [],
      eventmousedown: false,
      fireevent: true
    };
  },
  methods: {
    addfire() {
      this.fireevent = !this.fireevent;
    },
    changeclickstate() {
      this.click = this.click == "on" ? "off" : "on";
      let message = this.click == "on" ? "开启" : "关闭";
      this.$notify({
        title: "消息",
        message: message + "点击事件监听",
        position: "top-left",
        duration: 2000,
        type: "success"
      });
      this.canvas[this.click]("mouse:up", this.canvasevent);
    },
    changemovestate() {
      this.moveing = this.moveing == "on" ? "off" : "on";
      let message = this.moveing == "on" ? "开启" : "关闭";
      this.$notify({
        title: "消息",
        message: message + "鼠标移动事件监听",
        position: "top-left",
        duration: 2000,
        type: "success"
      });
      this.canvas[this.moveing]("mouse:move", this.canvasevent);
    },
    canvasevent(e) {
      if (this.eventmousedown === true) {
        this.eventlist.push(e);
      }
      if (e.isClick === true) {
        this.eventmousedown = false;
      }
    },
    clearlist() {
      this.eventlist = [];
    }
  },
  watch: {
    eventlist(newvalue, oldvalue) {
      console.log(newvalue);
    }
  },
  mounted() {
    let canvas = (this.canvas = new fabric.Canvas("canvas"));
    //是否拖动
    var panning = false;
    let _this = this;
    this.$nextTick(() => {
      var rect1 = new fabric.Rect({
        top: 50,
        left: 50,
        width: 70,
        height: 70,
        fill: "red"
      });
      canvas.add(rect1);
      var rect2 = new fabric.Rect({
        top: 50,
        left: 150,
        width: 70,
        height: 70,
        fill: "red"
      });
      canvas.add(rect2);
      var rect3 = new fabric.Rect({
        top: 50,
        left: 250,
        width: 70,
        height: 70,
        fill: "red"
      });
      canvas.add(rect3);
      canvas.on("mouse:down", function(e) {
        _this.eventmousedown = true;
      });
      canvas.on("mouse:down", function(e) {
        if (_this.fireevent) {
          canvas.fire("fire:test", {});
        }
      });
      canvas.on("fire:test", function(e) {
        _this.$notify({
          title: "消息",
          message: "fire:test 生效中",
          position: "top-left",
          duration: 2000,
          type: "success"
        });
      });
      rect3.on("selected", function() {
        _this.eventlist.push({
          e: {
            type: "选中第三个矩形"
          },
          pointer: {
            x: 0,
            y: 0
          }
        });
      });
    });
  }
};
</script>

<style>
canvas {
  border: 1px dashed black;
}
</style>

